﻿<!DOCTYPE html>
<html>
<head>
    <title>定制字体图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"  media="screen"/>
    <link href="lib/jquery-ui-1.9.2.custom/development-bundle/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script src="lib/jquery.min.js"></script>
    <script src="lib/jquery-ui.min.js"></script>
    <style>
        body
        {
            padding-top: 70px;
        }
        #red, #green, #blue
        {
            float: left;
            clear: left;
            width: 300px;
            margin: 15px;
        }
        #swatch
        {
            width: 120px;
            height: 100px;
            margin-top: 18px;
            margin-left: 350px;
            background-image: none;
        }
        #red .ui-slider-range
        {
            background: #ef2929;
        }
        #red .ui-slider-handle
        {
            border-color: #ef2929;
        }
        #green .ui-slider-range
        {
            background: #8ae234;
        }
        #green .ui-slider-handle
        {
            border-color: #8ae234;
        }
        #blue .ui-slider-range
        {
            background: #729fcf;
        }
        #blue .ui-slider-handle
        {
            border-color: #729fcf;
        }
        input
        {
            margin-top: 5px;
        }
        #code
        {
            background-color: #c6e4f0;
            padding: 7px;
        }
        .navbar-w3r
        {
            background: #4c4c4c; /* Old browsers */
            background: -moz-linear-gradient(top,  #4c4c4c 5%, #595959 12%, #4c4c4c 18%, #2c2c2c 50%, #131313 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#4c4c4c), color-stop(12%,#595959), color-stop(18%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #4c4c4c 5%,#595959 12%,#4c4c4c 18%,#2c2c2c 50%,#131313 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #4c4c4c 5%,#595959 12%,#4c4c4c 18%,#2c2c2c 50%,#131313 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #4c4c4c 5%,#595959 12%,#4c4c4c 18%,#2c2c2c 50%,#131313 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #4c4c4c 5%,#595959 12%,#4c4c4c 18%,#2c2c2c 50%,#131313 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
        }
    </style>
    <!--[if lt IE 9]>
      <script src="lib/html5shiv.min.js"></script>
      <script src="lib/respond.js"></script>
    <![endif]-->
</head>
<body class="ui-widget-content" style="border: 0;">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <h3>
                    字体大小</h3>
                <div id="slider">
                </div>
                <p id="slider-value">
                </p>
            </div>
            <div class="col-lg-6">
                <h3>
                    颜色</h3>
                <div id="red">
                </div>
                <div id="green">
                </div>
                <div id="blue">
                </div>
                <div id="swatch" class="ui-widget-content ui-corner-all">
                </div>
            </div>
            <div class="col-lg-3">
                <h3>
                    Text shadow</h3>
                <form class="form-inline" role="form">
                <div class="form-group">
                    <label class="sr-only" for="offsetx">
                        Offset X</label>
                    <input type="text" class="form-control" id="offsetx" placeholder="Enter offset-x, e.g. 2">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="offsety">
                        Offset Y</label>
                    <input type="text" class="form-control" id="offsety" placeholder="Enter offset-y, e.g. 2">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="blur">
                        Blur distance</label>
                    <input type="text" class="form-control" id="blur" placeholder="Enter blur distance, e.g. 2">
                </div>
                <div style="width: 100%">
                    选择颜色
                    <input type="color" id="color" value="#000000" list="colors">
                    <div class="alert alert-error" style="display: none;">
                        input[type=color] is not available on your browser</div>
                    <datalist id="colors">
<option>#ff0000</option>
<option>#0000ff</option>
<option>#00ff00</option>
<option>#ffff00</option>
<option>#00ffff</option>
<option>#f00</option> 
<option>red</option> 
</datalist>
                    <script>
                        if (!Modernizr.inputtypes.color) {
                            document.querySelector('#color').style.display = 'none';
                            document.querySelector('#colors').previousElementSibling.style.display = 'block';
                        }
                    </script>
                </div>
                <button type="button" class="btn btn-success" style="margin: 10px 0 10px 0" onclick="CreateShadow();">
                    创建阴影</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p id="code" style="display: none">
                </p>
                <table class="table table-bordered">
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-asterisk">Asterik</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-plus">Plus</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-euro">Euro</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-envelope">Envelope</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-pencil">Pencil</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-glass">Glass</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-music">Music</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-search">Search</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-heart">Heart</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-star">Star</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-star-empty">Empty</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-user">User</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-film">Film</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-th-large">Th large</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-th">Th</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-th-list">List</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-ok">Okay</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-remove">Remove</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-zoom-in">Zoom in</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-zoom-out">Zoom out</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-off">Off</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-signal">Signal</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-cog">Cog</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-trash">Trash</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-home">Home</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-file">File</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-time">Time</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-road">Road</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-download-alt">Download alt</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-download">Download</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-upload">Upload</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-inbox">Inbox</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-play-circle">Play circle</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-repeat">Repeat</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-refresh">Refresh</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-list-alt">List alt</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-lock">Lock</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-flag">Flag</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-headphones">Headphones</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-volume-off">Volume-off</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-volume-down">Volume-down</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-volume-up">Volume-up</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-qrcode">Qrcode</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-barcode">Barcode</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-tag">Tag</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-tags">Tags</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-book">Book</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-bookmark">Bookmark</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-print">Print</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-camera">Camera</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-font">Font</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-bold">Bold</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-italic">Italic</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-text-height">Text-height</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-text-width">Text-width</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-align-left">Align-left</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-align-center">Align-center</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-align-right">Align-right</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-align-justify">Align-justify</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-list">List</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-indent-left">Indent-left</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-indent-right">Indent-right</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-facetime-video">Facetime-video</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-picture">Picture</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-map-marker">Map-marker</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-adjust">Adjust</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-tint">Tint</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-edit">Edit</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-share">Share</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-check">Check</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-move">Move</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-step-backward">Step-backward</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-fast-backward">Fast-backward</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-backward">Backward</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-play">Play</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-pause">Pause</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-stop">Stop</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-forward">Forward</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-fast-forward">Fast-forward</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-step-forward">Step-forward</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-eject">Eject</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-chevron-left">Chevron-left</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-chevron-right">Chevron-right</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-plus-sign">Plus-sign</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-minus-sign">Minus-sign</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-remove-sign">Remove-sign</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-ok-sign">Ok-sign</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-question-sign">Question-sign</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-info-sign">Info-sign</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-screenshot">Screenshot</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-remove-circle">Remove-circle</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-ok-circle">Ok-circle</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-ban-circle">Ban-circle</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-arrow-left">Arrow-left</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-arrow-right">Arrow-right</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-arrow-up">Arrow-up</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-arrow-down">Arrow-down</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-share-alt">Share-alt</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-exclamation-sign">Exclamation-sign</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-gift">Gift</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-leaf">Leaf</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-fire">Fire</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-eye-open">Eye-open</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-eye-close">Eye-close</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-warning-sign">Warning-sign</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-plane">Plane</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-calendar">Calendar</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-random">Random</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-comment">Comment</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-magnet">Magnet</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-chevron-up">Chevron-up</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-chevron-down">Chevron-down</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-retweet">Retweet</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-shopping-cart">Shopping-cart</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-folder-close">Folder-close</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-folder-open">Folder-open</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-resize-vertical">Resize-vertical</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-resize-horizontal">Resize-horizontal</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-hdd">Hdd</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-bullhorn">Bullhorn</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-bell">Bell</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-certificate">Certificate</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-thumbs-up">Thumbs-up</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-thumbs-down">Thumbs-down</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-hand-right">Hand-right</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-hand-left">Hand-left</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-hand-up">Hand-up</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-hand-down">Hand-down</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-circle-arrow-right">Circle-arrow-right</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-circle-arrow-left">Circle-arrow-left</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-circle-arrow-up">Circle-arrow-up</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-circle-arrow-down">Circle-arrow-down</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-globe">Globe</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-wrench">Wrench</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-tasks">Tasks</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-filter">Filter</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-briefcase">Briefcase</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-fullscreen">glyphicon-fullscreen</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-dashboard">Dashboard</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-paperclip">Paperclip</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-heart-empty">Heart-empty</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-link">Link</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-phone">Phone</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-pushpin">Pushpin</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-usd">Usd</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-gbp">GBP</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sort">Sort</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sort-by-alphabet">Sort-by-alphabet</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sort-by-alphabet-alt">Sort-by-alphabet-alt</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sort-by-order">Sort-by-order</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-sort-by-order-alt">Sort-by-order-alt</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sort-by-attributes">Sort-by-attributes</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sort-by-attributes-alt">Sort-by-attributes-alt</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-unchecked">Unchecked</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-expand">Expand</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-collapse-down">Collapse-down</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-collapse-up">Collapse-up</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-log-in">Log-in</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-flash">Flash</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-log-out">Log-out</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-new-window">New-window</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-record">Record</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-save">Save</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-open">Open</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-saved">Saved</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-import">Import</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-export">Export</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-send">Send</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-floppy-disk">Floppy-disk</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-floppy-saved">Floppy-saved</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-floppy-remove">Floppy-remove</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-floppy-save">Floppy-save</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-floppy-open">Floppy-open</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-credit-card">Credit-card</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-transfer">Transfer</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-cutlery">Cutlery</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-header">Header</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-compressed">Compressed</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-earphone">Earphone</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-phone-alt">Phone-alt</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-tower">Tower</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-stats">Stats</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sd-video">Sd-video</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-hd-video">Hd-video</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-subtitles">Subtitles</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sound-stereo">Sound-stereo</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-sound-dolby">Sound-dolby</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sound-dolby">Sound-dolby</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sound-5-1">Sound-5-1</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sound-6-1">Sound-6-1</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-sound-7-1">Sound-7-1</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-copyright-mark">Copyright-mark</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="glyphicon glyphicon-registration-mark">Registration-mark</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-cloud-download">Cloud-download</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-cloud-upload">Cloud-upload</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-tree-conifer">Tree-conifer</span>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-tree-deciduous">Tree-deciduous</span>
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script src="lib/bootstrap.min.js"></script>
    <script src="lib/change.js"></script>
</body>
</html>
